<template>
  <div>
    <div class="container">
      <svg width="500" height="200" viewBox="0 0 500 200">
        <rect class="rect" x="5" y="5" width="100" height="50" stroke-width="5" stroke="blue" fill="none" />
      </svg>
    </div>
    <div class="container">
      <svg width="440" height="440" viewBox="0 0 440 440">
        <circle cx="220" cy="220" r="200" stroke-width="20" stroke="#d1d3d7" fill="none"></circle>
        <circle class="circle" cx="220" cy="220" r="200" stroke-width="20" transform="matrix(0 -1 1 0 0 440)"
          stroke="#00a5e0" fill="none"></circle>
      </svg>
    </div>
    <div class="container">
      <svg viewBox="0 0 1024 1024" width="200" height="200">
        <path class="logo"
          d="M786.731708 648C807.42218 648 824.195121 603.109084 824.195121 547.733333 824.195121 492.357583 807.42218 447.466667 786.731708 447.466667 766.041235 447.466667 749.268292 492.357583 749.268292 547.733333 749.268292 603.109084 766.041235 648 786.731708 648ZM462.048781 698.133333C482.739253 698.133333 499.512194 658.853781 499.512194 610.4 499.512194 561.946217 482.739253 522.666667 462.048781 522.666667 441.358308 522.666667 424.585365 561.946217 424.585365 610.4 424.585365 658.853781 441.358308 698.133333 462.048781 698.133333ZM0 572.8C0 822.813926 229.933961 1024 512 1024 794.066039 1024 1024 822.813926 1024 572.8 1024 322.786074 794.066039 121.599999 512 121.599999 515.649685 121.599999 516.946722 122.183253 516.866057 122.124053 514.736119 120.560928 512.302005 118.428984 505.789668 112.472612 487.675081 95.904489 476.340222 86.603485 458.812092 75.393661 404.94781 40.945655 334.29571 21.333333 237.268292 21.333333 223.474645 21.333333 212.292683 32.556062 212.292683 46.4 212.292683 60.243938 223.474645 71.466667 237.268292 71.466667 325.013274 71.466667 386.336418 88.489363 431.969129 117.673005 444.078925 125.417623 494.717728 171.733333 512 171.733333 767.886246 171.733333 974.048781 352.120043 974.048781 572.8 974.048781 793.479955 767.886246 973.866667 512 973.866667 256.113754 973.866667 49.951219 793.479955 49.951219 572.8 49.951219 427.029845 140.536466 294.462295 284.745583 223.557118 297.132651 217.466607 302.254953 202.450961 296.186566 190.018733 290.11818 177.586505 275.157079 172.445527 262.770012 178.536038 102.138268 257.515945 0 406.990833 0 572.8Z"
          fill="#999999"></path>
      </svg>
    </div>
    <div class="container">
      <svg class="line-container" width="400" height="400" viewBox="0 0 400 400">
        <line class="line" x1="0" y1="50" x2="400" y2="50" fill="none" stroke-width="20" stroke="red"></line>
      </svg>
    </div>
    <div class="container">
      <svg width="200" height="200">
        <rect x="0" y="0" fill="red" width="100" height="50">
          <set attributeName="x" attributeType="XML" to="10" begin="1s"></set>
          <set attributeName="x" attributeType="XML" to="20" begin="2s"></set>
          <set attributeName="fill" attributeType="XML" to="blue" begin="3s"></set>
        </rect>
      </svg>
    </div>
    <div class="container">
      <svg width="200" height="200">
        <circle cx="0" cy="0" r="30" fill="blue" stroke="black" stroke-width="1">
          <animate attributeName="cx" attributeType="XML" from="0" to="100" dur="3s" repeatCount="2" fill="freeze">
          </animate>
          <animate attributeName="cy" attributeType="XML" from="0" to="50" dur="3s" repeatCount="2" fill="freeze">
          </animate>
          <animate attributeName="fill" attributeType="XML" from="blue" to="red" dur="3s" repeatCount="2" fill="freeze">
          </animate>
          <animateTransform attributeName="transform" attributeType="XML" begin="0" dur="3s" type="scale" from="1" to="2"
            repeatCount="2" fill="freeze">
          </animateTransform>
        </circle>
      </svg>
    </div>
    <div class="container">
      <svg width="400" height="400">
        <polygon points="30 30 70 30 90 70 10 70" fill="#fcc" stroke="black">
          <animate attributeName="points" attributeType="XML" to="50 30 70 50 50 90 30 50" dur="1s" repeatCount="1"
            fill="freeze"></animate>
        </polygon>
      </svg>
    </div>
    <div class="container">
      <svg width="200" height="200">
        <rect x="0" y="0" fill="red" width="10" height="10">
          <animateMotion path="M10 10 L110 10 L110 110 L10 110 Z" dur="5s" rotate="0" fill="freeze" repeatCount="2">
          </animateMotion>
        </rect>
        <path d="M10 10 L110 10 L110 110 L10 110 Z" fill="none" stroke="green"></path>
      </svg>
    </div>
    <div class="container">
      <svg width="200" height="200">
        <rect x="0" y="0" fill="red" width="10" height="10">
          <animateMotion id="forward-rect" path="M10 10 L110 10 L110 110 L10 110" begin="0; backward-rect.end + 0.5s"
            dur="2s" rotate="0" fill="freeze">
          </animateMotion>
          <animateMotion id="backward-rect" path="M10 110 L110 110 L110 10 L10 10" begin="forward-rect.end + 0.5s"
            dur="2s" rotate="0" fill="freeze">
          </animateMotion>
          <animate id="red-to-blue" begin="0; blue-to-red.end + 0.5s" attributeName="fill" attributeType="XML" from="red"
            to="blue" dur="2s" fill="freeze">
          </animate>
          <animate id="blue-to-red" begin="red-to-blue.end + 0.5s" attributeName="fill" attributeType="XML" from="blue"
            to="red" dur="2s" fill="freeze">
          </animate>
        </rect>
        <path d="M10 10 L110 10 L110 110 L10 110 " fill="none" stroke="green"></path>
      </svg>
    </div>
    <div class="container bg-grey">
      <svg width="400" height="400">
        <defs>
          <mask id="test-mask">
            <rect x="5" y="5" width="390" height="390" fill="purple"></rect>
            <circle r="50" cx="150" cy="150"></circle>
          </mask>
          <linearGradient id="test-linear-gradient">
            <stop offset="0%" stop-color="red" stop-opacity="1"></stop>
            <stop offset="50%" stop-color="green"></stop>
            <stop offset="100%" stop-color="blue" stop-opacity="0.5"></stop>
          </linearGradient>
          <radialGradient id="test-radial-gradient" r="50%" cx="50%" cy="50%" fx="50%" fy="50%">
            <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
          </radialGradient>
        </defs>
        <!-- <rect x="5" y="5" width="390" height="390" fill="url(#test-radial-gradient)"></rect> -->
        <circle cx="200" cy="200" r="150" fill="url(#test-radial-gradient)"></circle>
        <!-- <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect> -->
      </svg>
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  name: 'SvgAnimation',
  setup () {
    onMounted(() => {
      const logo = document.getElementsByClassName('logo')[0]
      console.log(logo.getTotalLength());
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  svg {
    border: 1px solid #000;
  }
}

.rect {
  stroke-dasharray: 10 20 30;
}

.circle {
  animation: circle 4s linear infinite;
}

@keyframes circle {
  from {
    stroke-dasharray: 0 1257;
  }

  to {
    stroke-dasharray: 1257 0;
  }
}

.logo {
  fill: none;
  stroke: #333;
  stroke-width: 5;
  animation: logo 10s linear 1 forwards;
}

@keyframes logo {
  0% {
    fill: white;
    stroke: #333;
    stroke-dasharray: 6885;
    stroke-dashoffset: 6885;
  }

  50% {
    fill: white;
    stroke: #333;
    stroke-dasharray: 6885;
    stroke-dashoffset: 0;
  }

  75% {
    fill: red;
    stroke: white;
  }

  100% {
    fill: blue;
    stroke: white;
  }
}

.line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset .5s ease-out;
}

.line-container {
  &:hover {
    .line {
      stroke-dashoffset: 0;
    }
  }
}

.bg-grey {
  background: #333;
}
</style>